<!--
 * @Descripttion: 营销标签dialog
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-16 10:25:05
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-23 13:32:40
-->
<template>
  <div class="all-dialog">
    <div class="left-side">
      <div class="search-box">
        <el-input
          v-model="inputNumber"
          placeholder="标签编号"
        />
        <el-input
          v-model="inputLabel"
          placeholder="请输入标签名称"
        />
        <button class="search-button">查询</button>
      </div>
      <div class="label-box">
        <p class="subtitle">
          <span class="product-info">产品信息</span>
          <span class="select">选择</span>
        </p>
        <div class="all-label">
          <ul>
            <li
              v-for="(item, index) in productList"
              :key="index"
              @click="selectLabel(item)"
              class="list-item"
            >
              <input
                type="checkbox"
                :value="item.id"
                :class="`input${item.id}`"
              >
              <span class="label-item">
                <label for="item.id">
                  {{ item.title }}
                </label>
                <label for="item.id">{{ item.number }}</label>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right-side">
      <p class="title">
        <span class="selected">已选标签</span>
        <span>(最多5个，当前{{ selectList.length }}/5)</span>
      </p>
      <p class="subtitle">
        <span class="product-info">产品信息</span>
        <span>必选</span>
      </p>
      <div
        class="all-selected"
      >
        <template
          v-for="(rightItem, rightIndex) in selectList"
          :key="rightIndex"
        >
          <span class="selected-item">
            <span class="selected-label">
              <span>{{ rightItem.title }}</span>
              <span>123456</span>
            </span>
            <i
              class="el-icon-delete"
              @click="deleteItem(rightItem)"
            />
          </span>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
// import { MarketingLabelModel } from '../../../model/marketingLabel'

export default defineComponent({
  props: {
    // 左侧所有标签
    productList: {
      type: Array,
      default: () => []
    }
  },
  setup(props, {emit}) {
    const inputNumber = ref(null)
    const inputLabel = ref('')

    const methods = reactive({
      selectList: [], // 左侧选中的项
      // 左侧点击标签
      selectLabel(item: any) {
        if(!this.selectList.includes(item)) {
          this.selectList.push(item)
          (document.querySelector(`.input${item.id}`) as any).checked = true
        } else {
          (document.querySelector(`.input${item.id}`) as any).checked = false
          this.selectList = this.selectList.filter((value: any) => {
            return value.id !== item.id
          })
        }
      },
      // 右侧删除标签
      deleteItem(value: any) {
        (document.querySelector(`.input${value.id}`) as any).checked = false
        this.selectList = this.selectList.filter((curValue: any) => {
          return curValue.id !== value.id
        })
      },
      // 确认选择
      confirmSelected() {
        emit('confirmLabel', this.selectList)
      }
    })

    return {
      inputNumber,
      inputLabel,
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="scss" scoped>
@import "../../../style/globle-color";
.all-dialog {
  width: 100%;
  display: grid;
  grid-template-columns: 53% 43%;
  grid-column-gap: 2%;
}
.search-box {
  display: grid;
  grid-template-columns: 25% 60% 12%;
  grid-column-gap: 2%;
  .search-button {
    padding: 3px 5px;
    height: 30px;
    width: 43px;
    margin-top: 5px;
    background-color: #fff;
    border: 1px solid $border-gray;
  }
}
:deep .el-input__inner {
  height: 30px;
}
.label-box {
  .subtitle {
    height: 33px;
    line-height: 33px;
    padding-left: 10px;
    background-color: #F2F2F2;
    display: grid;
    grid-template-columns: 80% 20%;
  }
  .product-info {
    font-weight: 700;
  }
  .all-label {
    ul {
      padding-left: 0;
      display: grid;
      grid-template-columns: 33% 33% 33%;
    }
    .list-item {
      display: flex;
    }
    .label-item {
      display: flex;
      flex-direction: column;
    }
  }
}

.right-side {
  .title {
    height: 25px;
    line-height: 25px;
  }
  .selected {
    font-weight: 700;
  }
  .subtitle {
    height: 33px;
    line-height: 33px;
    width: 100%;
    background-color: #F2F2F2;
    display: grid;
    grid-template-columns: 85% 15%;
    .product-info {
      font-weight: 700;
      padding-left: 10px;
    }
  }
  .all-selected  {
    display: grid;
    grid-template-columns: repeat(3, 33%);
  }
  .selected-item {
    display: grid;
    grid-template-columns: 75% 25%;
  }
  .selected-label {
    display: flex;
    flex-direction: column;
  }
}
</style>
